// 选择客户协议弹窗
import React, { useState, useRef } from 'react'
import { Modal, message } from 'antd'
import EditableProTable from '@ant-design/pro-table'
import type { ProColumns, ActionType } from '@ant-design/pro-table'
import { request, FormattedMessage, useT } from '@designable/event-system'

// 获取租户客户协议
export function tenantListAgreement(params: object) {
  return request({
    uri: '/api/tenant/agreement/listAgreement',
    params,
    method: 'POST',
  })
}

type PropsType = {
  visible: boolean
  onCancel: () => void
  onOk: (data: any[]) => void
}

const TenantCustomAgreement = (props: PropsType) => {
  const { visible, onCancel, onOk } = props
  const [selectRow, setSelectRow] = useState<any[]>([])
  const $t = useT()
  const actionRef = useRef<ActionType>()

  const columns: ProColumns[] = [
    {
      width: 150,
      title: <FormattedMessage id="协议编号" />,
      dataIndex: 'code',
      ellipsis: true,
      search: false,
    },
    {
      width: 150,
      title: <FormattedMessage id="客户编号" />,
      dataIndex: 'cusCode',
      ellipsis: true,
      search: false,
    },
    {
      title: <FormattedMessage id="协议名称" />,
      dataIndex: 'name',
      ellipsis: true,
      search: false,
    },
    {
      title: <FormattedMessage id="协议客户" />,
      dataIndex: 'cusName',
      ellipsis: true,
      search: false,
    },
    {
      width: 220,
      title: <FormattedMessage id="有效期" />,
      dataIndex: 'projectStart',
      ellipsis: true,
      search: false,
      render: (_, record) => (
        <div>
          {record.startDate &&
            record.endDate &&
            `${record.startDate}~${record.endDate}`}
        </div>
      ),
    },
    {
      width: 150,
      title: <FormattedMessage id="状态" />,
      dataIndex: 'status',
      search: false,
      render: (_, record) => {
        const statusName: any = {
          '0': <FormattedMessage id="在用" />,
          '1': <FormattedMessage id="停用" />,
          '2': <FormattedMessage id="已过期" />,
          '3': <FormattedMessage id="待生效" />,
        }
        return statusName[record.status]
      },
    },
    {
      title: <FormattedMessage id="客户信息" />,
      dataIndex: 'customerKey',
      hideInTable: true,
    },
    {
      title: <FormattedMessage id="协议信息" />,
      dataIndex: 'agreementKey',
      hideInTable: true,
    },
  ]

  return (
    <Modal
      title={<FormattedMessage id="选择客户协议" />}
      visible={visible}
      width={1200}
      onCancel={onCancel}
      onOk={() => {
        if (selectRow.length === 0) {
          message.error($t('请先选择客户协议'))
          return
        }
        onOk(selectRow)
      }}
    >
      <EditableProTable
        columns={columns}
        actionRef={actionRef}
        search={{
          labelWidth: 'auto',
          collapsed: false,
          collapseRender: () => <></>,
          style: {
            background: '#F7F8FA',
            padding: '24px 20px',
            borderRadius: 4,
          },
        }}
        request={async (params: any) => {
          const res: any = await tenantListAgreement({
            ...params,
            size: params.pageSize,
          })
          return {
            data: res,
            success: true,
            total: res.length,
          }
        }}
        rowSelection={{
          type: 'radio',
          defaultSelectedRowKeys: selectRow.map((item: any) => item.code),
          onChange: (keys, rows) => {
            setSelectRow(rows)
          },
        }}
        rowKey="code"
        pagination={{
          size: 'default',
          defaultPageSize: 10,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50', '100'],
        }}
        dateFormatter="string"
        toolBarRender={false}
      />
    </Modal>
  )
}

export default TenantCustomAgreement
